<!--  -->
<template>
  <div class='detail'>
    <el-dialog
      title="其它费用查看"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="title">
        <div>
          <span>公司名称：</span>
          <span>{{form.companyName}}</span>
        </div>
        <div>
          <span>缴费金额(元)：</span>
          <span>{{form.money}}</span>
        </div>
        <div style="padding-top:10px;">
          <span>状态：</span>
          <span>{{form.moneyType==2?form.isPayment==0?'未缴费':'已缴费':'已退款'}}</span>
        </div>
        <div
          v-if="form.moneyType==1"
          style="padding-top:10px;"
        >
          <span>退款流水号：</span>
          <span>{{form.refundNumber}}</span>
        </div>
      </div>
      <div class="center">
        <span>费用信息</span>
        <el-divider></el-divider>
      </div>
      <div class="items">
        <div class="item">
          <span>费用类型：</span>
          <span>{{form.costType | TypeListChange(thats)}}</span>
        </div>
        <div class="item">
          <span>区域：</span>
          <span>{{form.area}}</span>
        </div>
        <div class="item">
          <span>关联合同编号：</span>
          <span>{{form.contractNumber}}</span>
        </div>
        <div
          class="item"
          style="width:100%;display: flex;"
        >
          <span>备注：</span>
          <span style="width:90%;">
            <el-input
              style="width:100%;"
              v-model="form.remark"
              disabled
              type='textarea'
            ></el-input>
          </span>
        </div>
      </div>
      <div style="width:100%;float:left;">
        <div style="width:100%;font-size:18px;border-bottom:1px double #ddd; line-height:40px; ">操作日志</div>
        <div
          class="block"
          style="margin-top: 20px;"
        >
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in logList"
              :key="index"
              icon="el-icon-more"
              size="large"
              :timestamp="activity.modifyContent"
            >
              {{activity.updateByName}} {{activity.updateDate}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { OperationLog, getDicType } from '@/api/common.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      dialogVisible: false,
      form: {

      },
      logList: [],
      typeList: [],
      thats: this
    }
  },
  filters: {
    TypeListChange (value, thats) {
      let str = ''
      thats.typeList.forEach(item => {
        if (value == item.value) {
          str = item.label
        }
      })
      return str
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleClose () {
      this.dialogVisible = false
    },
    init (item) {
      let url = '/config/sysoperationlog/' + item.id + '/8'
      OperationLog(url).then(response => {
        this.logList = response.data.data
      })
      getDicType('other_money_type').then(res => {
        this.typeList = res.data.data
      })
      this.dialogVisible = true
      this.form = item
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.title {
  // font-size: 20px;
  display: flex;
  flex-wrap: wrap;
  div {
    width: 50%;
  }
  div:nth-child(2n) {
    width: 30%;
    margin-left: 20px;
  }
  div:first-child {
    margin-left: 0px;
  }
}
.center {
  font-size: 18px;
  margin-top: 20px;
}
.items {
  display: flex;
  flex-wrap: wrap;
  .item {
    padding-left: 10px;
    // padding-top: 20px;
    padding-bottom: 20px;
    width: 33%;
  }
}
</style>